const path = require('path')

//1.导入htm1-webpack-plugin这个插件，得到插件的构造函数
const HtmolPlugin = require('html-webpack-plugin')
//2.new构造函数 创建插件的实例对象
const htmlPlugin = new HtmolPlugin({
    //指定要复制那个页面
    template: './src/index.html',
    //指定复制出来的文件名和路径
    filename: './index.html'
})
//左侧 解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//使用nodejs导出语法，向外导出一个webpack的配置对象
module.exports = {
    //在开发调试阶段，将devtool设置为 eval-source-map
    // devtool:'eval-source-map',  
    //在实际发布阶段，将devtool设置为 nosources-source-map 或者直接关闭 SourceMap
    devtool: 'nosources-source-map',
    //代表webpack运行的模式，可选值有两个development 和 production
    //结论:开发时候一定要用 development，因为追求的是打包的速度，而不是体积; 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快!
    mode: 'development',
    //entry: '指定要处理哪个文件'
    entry: path.join(__dirname, './src/index1.js'), //打包入口文件路径
    //制定生成文件要存放到哪里
    output: {
        //存放到目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename: 'js/bundle.js'
    },
    //插件数组，在webpack运行时会加载并调用这些插件
    plugins: [htmlPlugin, new CleanWebpackPlugin(),],
    devServer: {
        //首次打包成功后自动打开浏览器(默认值 false)
        open: true,
        //指定运行的主机地址(默认值 localhost)
        host: '127.0.0.1',
        //http 协议中如果能口号是88是可以被省路(默认值 8080)
        port: 8080,
    },
    //所有第三方文件模块的匹配规则 
    module: {
        rules: [
            //处理.css文件的loader
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            //处理.less文件的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //处理文件图片的loader
            //在配置 url-loader 的时候，多个参数之间用&分隔
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=5800&outputPath=images' },
            //使用bable-loader 处理高级的JS语法   exclude指定排除项,因为node_modules 目录下的第三方包不需要被打包 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modul es/ }
        ]
    },
    resolve: {
        alias: {
            //@ 表示 src目录 
            '@': path.join(__dirname, './src/')
        }
    }
}